<template>
  <div class="">
    <div style="margin-top: 10px;margin-bottom: 10px">
      <span>项目：</span>
      <el-select size="mini" style="width: 150px;margin-right: 10px;" v-model="projectId">
        <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
      </el-select>
      <span>主模块名：</span>
      <el-input placeholder="请输入模块名" v-model="nameinput" size="mini" style="width: 140px;margin-right: 10px"></el-input>
      <span>模块版本：</span>
      <el-input placeholder="请输入版本" v-model="verinput" size="mini" style="width: 100px;margin-right: 10px"></el-input>
      <span>系统：</span>
      <el-input placeholder="请输入系统" v-model="osinput" size="mini" style="width: 100px;margin-right: 10px"></el-input>
      <span>PCID：</span>

      <el-input placeholder="请输入PCID" v-model="pcidinput" size="mini" style="width: 140px;margin-right: 10px"></el-input>
      <span>时间：</span>
      <el-date-picker
        v-model="dateValue"
        size="mini"
        type="daterange"
        align="left"
        unlink-panels
        format="yyyy-MM-dd"
        value-format="yyyy/MM/dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="startSearch()"
        style ="width: 260px">
      </el-date-picker>
      <el-button size="mini" style="margin-left: 15px;" type="primary" @click.native = "startSearch()">查询</el-button>
      <el-button @click="exportExcel" size="mini" type="success">导出</el-button>
    </div>
    <el-table :data="tableData" v-loading="listLoading" stripe border fit style="width: 100%;margin-top: 10px;" id="DumpTable">
      <el-table-column min-width="118" label="时间" prop="createdAt"></el-table-column>
      <el-table-column min-width="180" label="用户PCID" prop="pcid"></el-table-column>
      <el-table-column min-width="60" label="系统">
        <span slot-scope="{ row }">
          {{ row.winver|formatOS}}
        </span>
      </el-table-column>
      <el-table-column min-width="78" label="模块名" prop="mname"></el-table-column>
      <el-table-column min-width="72" label="模块版本" prop="mver"></el-table-column>
      <el-table-column min-width="78" label="子模块名" prop="subname"></el-table-column>
      <el-table-column min-width="72" label="子模块版本" prop="subver"></el-table-column>
      <el-table-column min-width="72" label="错误码" prop="errorcode"></el-table-column>
      <el-table-column align="center" width="70" label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">下载</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="getDumpData"
      :current-page.sync="currentPage"
      :page-size= "pagesize"
      layout="total, prev, pager, next, jumper"
      :total= "totalcount"
      style="padding: 20px 0;"
      small
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { getDumpList1 } from '@/api/feedback'
import { parseTime } from '@/utils'
export default {
  name: 'DumpStat',
  data () {
    return {
      downUrl: '',
      projectId: null,
      nameinput: '',
      verinput: '',
      osinput: '',
      pcidinput: '',
      dateValue: [],
      listLoading: false,
      tableData: [],
      pagesize: 30,
      totalcount: 0,
      currentPage: 1,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今日',
          onClick (picker) {
            const day = new Date()
            picker.$emit('pick', [day, day])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick (picker) {
            const end = new Date()
            const start = new Date(end.getFullYear(), end.getMonth(), 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年至今',
          onClick (picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  filters: {
    formatOS (winver) {
      const arr = ['未上报', '未知系统', 'WINXP', 'WINXP_64', 'VISTA', 'VISTA_64', 'WIN7', 'WIN7_64', 'WIN8', 'WIN8_64', 'WIN8.1', 'WIN8.1_64', 'WIN10', 'WIN10_64']
      return arr[winver] || ''
    }
  },
  created () {
    const now = new Date()
    const start = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000)
    this.dateValue = [start, now]
    if (this.permission_projectList.length) {
      this.projectId = this.permission_projectList[0].app_id
    }
    this.getDumpData()
  },
  methods: {
    exportExcel () {
      let xlsxParam = { raw: true }
      let wb = XLSX.utils.table_to_book(document.querySelector('#DumpTable'), xlsxParam)
      let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        let saveName = this.dateValue[0] + '至' + this.dateValue[1] + 'Dump统计.xlsx'
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), saveName)
      } catch (e) {

      }
    },
    startSearch () {
      this.currentPage = 1
      this.getDumpData()
    },
    getDumpData () {
      let nStartTime = parseTime(this.dateValue[0], '{y}{m}{d}')
      let nEndTime = parseTime(new Date(this.dateValue[1]).getTime() + 24 * 60 * 60 * 1000, '{y}{m}{d}')
      const obj = {
        appid: this.projectId,
        version: this.verinput,
        os: this.formatOS(this.osinput),
        mname: this.nameinput,
        pcid: this.pcidinput,
        starttime: nStartTime,
        endtime: nEndTime,
        page: (this.currentPage - 1) * this.pagesize,
        pagesize: this.pagesize
      }
      this.listLoading = true
      getDumpList1(obj).then((res) => {
        if (res.result.totalcount === 0) {
          this.$message({
            showClose: false,
            message: '查询无数据，请重新输入关键字',
            type: 'warning',
            duration: 1000
          })
        } else {
          this.tableData = res.result.list
          this.totalcount = res.result.totalcount
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    formatOS (winver) {
      const obj = {
        'WINXP': 2,
        'WINXP_64': 3,
        'VISTA': 4,
        'VISTA_64': 5,
        'WIN7': 6,
        'WIN7_64': 7,
        'WIN8': 8,
        'WIN8_64': 9,
        'WIN8.1': 10,
        'WIN8.1_64': 11,
        'WIN10': 12,
        'WIN10_64': 13
      }
      return obj[winver]
    },
    handleClick (row) {
      let url = 'http://dump.mgr.xzdesktop.cqttech.com' + row.filepath
      if (this.appid === '60' || this.appid === '21') {
        url = 'http://dump.file.dcbrowser.cqttech.com/file' + row.filepath
      }
      window.open(url, '_blank')
    }
  }
}
</script>
